<style>
    .wifi-info {
        color: white;
        padding-left: 20px;
    }

    .table-container {
        background-color: transparent;
        color: white;
        width: 100%;
        /* height: 270px; */
        padding: 30px 0px 20px 0px;
        text-align: left;
        table-layout: fixed;
        border: none;
    }

    .table-container td {
        /* padding-left: 15px; */
        /* padding-right: 15px; */
    }

    .table-container .name {
        padding-left: 15px;
    }

    .table-container .value {
        width: 50px;
    }

    .wifi-info span {
        min-width: 50px;
    }
</style>

<!-- <div class="mdl-spinner mdl-js-spinner is-active"></div> -->
<table class="table-container" rules="none">
    <thead>
        <tr>
            <th class="name">{{'主机IP' | translate}}</th>
            <th class="value">{{'消息数' | translate}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in items" ng-init="$last && $emit('repeatFinished')"
            ng-class="{ active: $index == itemIndex}">

            <td class="name">
                <div ng-class="{ active: $index == itemIndex}">
                    <a ng-if="item.link" href="{{item.link}}">{{item.ip}}</a>
                </div>
            </td>
            <td class="value">{{item.msg_count}}</td">
                </div>
        </tr>
    </tbody>
</table>